<?php

include_once (dirname(dirname(__FILE__)))."/vendor/Script/DBInteractive.php";

class veritas{
	private $nodeId;
	private $serverTaleName;
	
	public function __construct($nodeId,$serverTaleName){
		$this->nodeId = $nodeId;
		$this->serverTaleName = $serverTaleName;
	}
	
	public function show(){
		$veritas = new NBU();
		$like = $veritas->TapeBackups();
		//var_dump($like);
		if(!isset($like['num']) || !isset($like['percentage'])){
			var_dump('xlsx文件未输入');
			exit;
		}
		echo '
<body>

    <!-- 主题内容开始  -->
    <div class="veritas-content">
        <div class="container">
            <!-- 标题 -->
            <div class="medium-title">
                <img src="public/img/title.png" alt="">
            </div>
            <!-- 三大模块内容开始 -->
            <div class="medium-box">
                <!-- tab选项结束 -->
                <!-- tab内容开始 -->
                <div id="medium-tab-txt" class="medium-tab-txt">
                    <!-- 色块 -->
                    <div class="medium-div clearfix">
                        <!-- 8 bar -->
                        <div class="medium-div-bar col-left">
                            <div class="tape-bar bar1">
                               <h4>磁带总数</h4>
                               <span>'.$like['num']['TotalMedias'].'</span> 
                            </div>
                            <div class="tape-bar bar2">
                                <h4>磁带总风险</h4>
                               <span>'.$like['num']['TotalRiskMedias'].'</span>
                            </div>
                            <div class="tape-bar bar3">
                                <h4>使用1年</h4>
                               <span>'.$like['num']['Used1Years'].'</span>
                            </div>
                            <div class="tape-bar bar4">
                                <h4>超过500次挂载</h4>
                               <span>'.$like['num']['Exceeded500Mounts'].'</span>
                            </div>
                            <div class="tape-bar bar5">
                                <h4>匹配条形码规则</h4>
                               <span>'.$like['num']['MatchedBarcodeRules'].'</span>
                            </div>
                            <div class="tape-bar bar6">
                                <h4>有数据</h4>
                               <span>'.$like['num']['HasData'].'</span>
                            </div>
                            <div class="tape-bar bar7">
                                <h4>无数据</h4>
                               <span>'.$like['num']['NoData'].'</span>
                            </div>
                            <div class="tape-bar bar8">
                                <h4>有风险的数据(GB)</h4>
                               <span>'.$like['num']['DataSizeInRisk(GB)'].'</span>
                            </div>
                        </div>
                        <!-- ring -->
                        <div class="medium-div-ring col-left">
                            <div class="div-ring">
                                <h4>磁带总风险比例</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas1-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas1-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas1-ring1");
                                    var canvas_2 = document.querySelector("#canvas1-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte('.$like['percentage']['TotalRiskMedias'].');
                                </script>
                            </div>
                            <div class="div-ring">
                                <h4>使用1年比例</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas2-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas2-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas2-ring1");
                                    var canvas_2 = document.querySelector("#canvas2-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte('.$like['percentage']['Used1Years'].');
                                </script>
                            </div>
                            <div class="div-ring">
                                <h4>超过500次挂载%</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas3-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas3-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas3-ring1");
                                    var canvas_2 = document.querySelector("#canvas3-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte('.$like['percentage']['Exceeded500Mounts'].');
                                </script>
                            </div>
                            <div class="div-ring">
                                <h4>匹配条形码比例</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas4-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas4-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas4-ring1");
                                    var canvas_2 = document.querySelector("#canvas4-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte('.$like['percentage']['MatchedBarcodeRules'].');
                                </script>
                            </div>
                            <div class="div-ring">
                                <h4>有数据比例</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas5-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas5-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas5-ring1");
                                    var canvas_2 = document.querySelector("#canvas5-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte('.$like['percentage']['HasData'].');
                                </script>
                            </div>
                            <div class="div-ring">
                                <h4>有风险数据比例</h4>
                                <div class="div-ring-txt">
                                    <canvas id="canvas6-ring1" width="100" height="100"></canvas>
                                    <canvas id="canvas6-ring2" width="100" height="100"></canvas>
                                </div>
                                <script>
                                   function inte(percent){
                                    var canvas_1 = document.querySelector("#canvas6-ring1");
                                    var canvas_2 = document.querySelector("#canvas6-ring2");
                                    var ctx_1 = canvas_1.getContext("2d");
                                    var ctx_2 = canvas_2.getContext("2d");
                                    ctx_1.lineWidth = 16;
                                    ctx_1.strokeStyle = "#ccc";
                                    //画底部的灰色圆环
                                    ctx_1.beginPath();
                                    ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
                                    ctx_1.closePath();
                                    ctx_1.stroke();
                                    if (percent < 0 || percent > 100) {
                                        throw new Error("percent must be between 0 and 100");
                                        return
                                    }
                                    ctx_2.lineWidth = 16;
                                    ctx_2.strokeStyle = "#0099cc";
                                    var angle = 0;
                                    var timer;
                                    (function draw() {
                                        timer = requestAnimationFrame(draw);
                                        ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                                        //百分比圆环
                                        ctx_2.beginPath();
                                        ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                                        angle++;
                                        var percentAge = parseInt((angle / 360) * 100)
                                        if (angle > (percent / 100 * 360)) {
                                            percentAge = percent
                                            window.cancelAnimationFrame(timer);
                                        };
                                        ctx_2.stroke();
                                        ctx_2.closePath();
                                        ctx_2.save();
                                        ctx_2.beginPath();
                                        ctx_2.rotate(90 * Math.PI / 180)
                                        ctx_2.font = "20px Arial";
                                        ctx_2.fillStyle = "#0099cc";
                                        var text = percentAge + "%";
                                        ctx_2.fillText(text, 30, -44);
                                        ctx_2.closePath();
                                        ctx_2.restore();
                                    })()
                                    }
                                    inte(20);
                                </script>
                            </div>
                        </div>
                    </div>
                    <!--<div class="assessment-time">
                        以上评估结果是<span>2016-08-30 13:45:30</span>评估
                    </div>
                    <div class="medium-input">
                        <form action="">
                            <label for="">使用期限：<select name="" id="">
                                <option value="5年">5年</option>
                                <option value="6年">6年</option>
                                <option value="7年">7年</option>
                            </select></label>
                            <label for="">挂载次数：<select name="" id="">
                                <option value="500次">500次</option>
                                <option value="1000次">1000次</option>
                                <option value="1500次">1500次</option>
                            </select></label>
                            <label for="">条码规则：<select name="" id="">
                                <option value="无规则">无规则</option>
                                <option value="有规则">有规则</option>
                            </select></label>
                            <label for=""><input type="submit" value="开始评估"></label>
                        </form>
                    </div> -->
                </div>
                <!-- tab内容结束 -->
            </div>
            <!-- 三大模块内容结束 -->
        </div>
    </div>
    <!-- 主题内容结束 -->
</body>';
	}
}